import { useState, useEffect } from "react";

// useEffect的基础使用
// 在修改数据之后 把count值放到页面标题中
// 1.导入useEffect函数
// 2.在函数组件中执行 传入回调 并定义副作用
// 3.当我们通过修改状态更新组件时，副作用也会不断执行


// useEffect通过依赖项控制执行时机
// 1.默认状态（无依赖项）
// 组件初始化的时候先执行一次  等到每次数据修改，组件更新会再次执行
// 2.空状态
// 只在组件初始化时执行一次
// 3.特定依赖项
// 组件初始化的时候先执行一次，在依赖项发生变化时重新执行

function App () {
  const [count, setCount] = useState(0)
  // 1.默认状态
  // useEffect(() => {
  //   // 定义副作用
  //   document.title = count
  // })

  // 2.空状态
  // useEffect(() => {
  //   // 定义副作用
  //   console.log('useEffect执行');
  //   document.title = 1
  // }, [])
  // 3.特定依赖项
  useEffect(() => {
    // 定义副作用
    console.log('useEffect执行');
    document.title = count
  }, [count])
  return (
    <div>
      <button onClick={ () => setCount(count + 1) }>{count}</button>
    </div>
  )
}

export default App;
